<template>
	<div class="sz-form">
		<div class="header">
			<slot name="header"></slot>
		</div>
		<el-form :label-width="labelWidth">
			<el-row>
				<template v-for="item in formItems" :key="item.label">
            <!-- v-if="countyShow" -->
						<el-col :span="countyShow?6:0" v-if="item.field == 'ds'">
							<el-form-item

								:label="item.label"
								:style="itemStyle"
								:label-width="item.labelWidth"
							>
								<!-- <template> -->
									<slot :name="item.field"></slot>
								<!-- </template> -->
							</el-form-item>
						</el-col>
						<span v-else></span>

					<el-col v-bind="colLayout" v-else>
						<el-form-item :label="item.label" :style="itemStyle" :label-width="item.labelWidth">
							<template v-if="item.type === 'input' || item.type === 'password'">
								<el-input
									clearable
									:placeholder="item.placeholder"
									:show-password="item.type === 'password'"
									v-model="formData[`${item.field}`]"
								></el-input>
							</template>
							<template v-if="item.type === 'slot'">
								<slot :name="item.field"></slot>
							</template>
							<template v-else-if="item.type === 'select'">
								<el-select
									clearable
									:placeholder="item.placeholder"
									style="width: 100%"
									v-model="formData[`${item.field}`]"
								>
									<el-option
										v-for="option in item.options"
										:key="option.value"
										:label="option.label"
										:value="option.value"
									>
										{{ option.label }}
									</el-option>
								</el-select>
							</template>
							<template v-else-if="item.type === 'datepicker'">
								<el-date-picker
									v-bind="item.otherOptions"
									v-model="formData[`${item.field}`]"
								></el-date-picker>
							</template>
							<template v-else-if="item.type === 'year'">
								<el-date-picker
										type="year"
										value-format="YYYY"
										placeholder="选择日期"
										v-model="formData[`${item.field}`]"
								></el-date-picker>
							</template>
						</el-form-item>
					</el-col>
				</template>
				<el-col :span="6">
					<el-form-item label-width="2px">
						<slot name="btn"></slot>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="footer">
			<slot name="footer"></slot>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, PropType, ref, watch } from 'vue'
import { IFormItem } from '../types'

export default defineComponent({
	props: {
		modelValue: {
			type: Object,
			required: true
		},
		formItems: {
			type: Array as PropType<IFormItem[]>,
			default: () => []
		},
		labelWidth: {
			type: String,
			default: () => '100px'
		},
		itemStyle: {
			type: Object,
			default: () => ({ padding: '10px 4px' })
		},
		colLayout: {
			type: Object,
			default: () => ({
				xl: 6,
				lg: 6,
				md: 12,
				sm: 24,
				xs: 24
			})
		},
		countyShow: {
			type: Boolean,
			required: false,
			default: true
		}
	},
	emits: ['update:modelValue'],
	setup(props, { emit }) {
		// 展开获取到父组件传来的值，单向数据流
		const formData = ref({ ...props.modelValue })
		// 通过深度侦听formData的值，改变数据时通过emit告诉父组件数据的更新
		// 实现组件的双向绑定
		watch(
			() => formData.value,
			(newValue) => {
				emit('update:modelValue', newValue)
			},
			{
				deep: true
			}
		)
		return {
			formData
		}
	}
})
</script>

<style scoped></style>
